import React from 'react';
import {EXAM} from '../../utils/config'
import {PicUrl} from '../../utils/basic'
import './css/start.less'
import '../../styles/sprites/answer.css'
import http from '../../utils/http';
import Video from './components/Video'
import EventBus from '../../utils/eventBus';
// import { Toast } from '../components/Toast';

let total = 0 // 当前水平测试题总数量
class TestStart extends React.Component {
  state = {
    curExam: {
      content: {},
      answer: {
        content: {}
      }
    }, // 第几题
    examList: [], // 当前水平题库列表
    answerSelected: 0,
    score: 0, // 做对的题数
    selectedRest: 0, // 选择的答案
    exactRest: 0, // 正确的答案
    lastLevel: 0, // 最终测试水平
    examno: 0 // 已经做到第几题
  }
  //订单接口调取数据执行
  componentDidMount(){
    const basicLevel = this.props.basicLevel   // 基础水平   
    const exams = EXAM[`level${basicLevel}`]  
    total = exams.length         
    this.setState({
      examList: exams,
      curExam: exams[0]
    })
  }
  nextStep = (type) => {
    let examno = this.state.examno
    let score = this.state.score
    if(type===1 && (this.state.selectedRest && this.state.selectedRest === this.state.exactRest)) {
      score += 1
    }
    if (examno < total) {
      examno += 1
      this.setState({
        answerSelected: 0,
        examno,
        score,
        curExam: this.state.examList[examno]
      })
    }
    EventBus.$emit('stopAudio')
    if (examno === total) {
      this.getScore()
    }
    this.setState({
      selectedRest: 0,
      exactRest: 0
    })
  }
  getResult = (result, value) => {
    const isSelected = this.state.answerSelected === value ? 0 : value;
    this.setState({
      selectedRest: value,
      exactRest: isSelected,
      answerSelected: isSelected
    })
  }

  renderContent (content) {
    let msg = ''
    switch(content.type) {
      case 1:
        msg = <div className="question-one-img">
          <img alt="" className="col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1 col-xs-12" src={PicUrl + content.img}></img>
        </div>
        break;
      case 2:
        msg = (<div className="question-one-video">
          <Video key={this.state.examno} url={content.video1}></Video>
          <div className="video-text">click play to listen</div>
        </div>)
        break;
      case 3:
        msg = (<div className="question-one-video">
          <div className="col-md-6">
            <Video key={this.state.examno} url={content.video1}></Video>
            <div className="video-text">click play to listen</div>
          </div>
          <div className="col-md-6">
            <Video key={this.state.examno} url={content.vidio2}></Video>
            <div className="video-text">click play to listen</div>
          </div>
        </div>)
        break;
      case 4:
        msg = (<div className="question-dialog">
          <Video key={this.state.examno} type="2" url={content.video1} className="talk-video col-md-offset-3 col-md-2 col-sm-offset-3 col-sm-2"></Video>
          <img className="col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1 col-xs-12 dialog-img" src={PicUrl + content.img} alt=""></img>
        </div>)
        break;
      case 5:
        msg = (<div>
          <div className="question-text">{content.text}</div>
          <img className="question-text-pic col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-12" src={PicUrl + content.img} alt=""></img>
        </div>)
        break;
      case 6:
        msg = (<div className="question-video-img">
          <div className="col-md-6">
            <Video key={this.state.examno} url={content.video1}></Video>
            <div className="video-text">click play to listen</div>
          </div>
          <div className="col-md-6">
          <img className="col-md-8 col-sm-10 col-xs-12" src={PicUrl + content.img} alt=""></img>
          </div>
        </div>)
        break;
      default:
        break;
    }
    return msg;
  }
  renderAnswer (answer, item_i, contentType) {
    let msg = ''
    switch(answer.type) {
      case 1:
        msg = (<div className={Object.keys(answer.content).length===2?'col-md-3 col-md-offset-2 col-sm-3 col-sm-offset-2 col-xs-12': 'col-md-4 gap'}>
          <div className="answer-cont" >
            <div className="answer-cont-video">
              <Video type="1" url={item_i} key={item_i}></Video>
            </div>
            <div className="answer-check-cont" onClick={() => this.getResult(this.state.curExam.answer.result, this.state.curExam.answer.content[item_i])}>
              {this.state.answerSelected === this.state.curExam.answer.content[item_i]?
              <img src={require('../../images/tests/answer-s.png')} alt=''></img>:
              <img src={require('../../images/tests/answer-n.png')} alt=''></img>}
            </div>
          </div>
        </div>)
        break;
      case 2:
        msg =  (<div className={Object.keys(answer.content).length===4?'col-md-3 gap': 'col-md-4 gap'}>
          <div className="answer-cont">
            <div className="answer-cont-text">
              {item_i}
            </div>
            <div className="answer-check-cont" onClick={() => this.getResult(this.state.curExam.answer.result, this.state.curExam.answer.content[item_i])}>
              {this.state.answerSelected === this.state.curExam.answer.content[item_i]?
              <img src={require('../../images/tests/answer-s.png')} alt=''></img>:
              <img src={require('../../images/tests/answer-n.png')} alt=''></img>}
            </div>
          </div>
        </div>)
        break;
      case 3:
        msg =  (<div className={Object.keys(answer.content).length===4?'col-md-3 col-sm-3 col-xs-3':'col-md-4 col-sm-3 col-xs-3 gap'}>
          <div className="answer-cont">
            <div className={`answer-cont-img ${item_i}`}>
            </div>
            <div className="answer-check-cont" onClick={() => this.getResult(this.state.curExam.answer.result, this.state.curExam.answer.content[item_i])}>
              {this.state.answerSelected === this.state.curExam.answer.content[item_i]?
              <img src={require('../../images/tests/answer-s.png')} alt=''></img>:
              <img src={require('../../images/tests/answer-n.png')} alt=''></img>}
            </div>
          </div>
        </div>)
        break;
      default:
        break;
    }
    return msg;
  }
  getScore = () => {
    const score = this.state.score * 5
    const basicLevel = Number(this.props.basicLevel)   // 基础水平
    let level = basicLevel
    // 小于60降级 60-80平级 大于80升级
    if (score < 60) {
      level = basicLevel - 1
    } else if (score >= 80) {
      level = basicLevel + 1
    }
    level = level < 0 ? 0 : level
    this.setState({
      lastLevel: level
    })
  }
  saveTest = () => {
    const basicLevel = this.props.basicLevel   // 基础水平
    const lastLevel = this.state.lastLevel
    http
      .post('/test/create/level', {
          titleType: basicLevel,
          level: lastLevel
      })
      .then(data => {
        // Toast('保存成功!')
        this.props.goUser()
      }, err => {
      })
  }
  render() {
    return (
      <div className="test-start">
        {this.state.examno < total ?
        <div>
          <div className="start-content">
            {/* 标题 */}
            {this.state.curExam.title?
            <div className="exam-title">{this.state.curExam.title}</div>
            :''}
            <div>
              {this.renderContent(this.state.curExam.content)}
            </div>
            <div className="answer clearfix col-md-offset-1 col-md-10 col-sm-12 col-xs-12">
              {Object.keys(this.state.curExam.answer.content).map((item_i, index_i) => (
                <div key={index_i}>{this.renderAnswer (this.state.curExam.answer, item_i, this.state.curExam.content.type)}</div>
              ))}
            </div>
          </div>
          <div className="start-footer test-back">
            <img className="back-normal" src={require('../../images/tests/next-normal.png')} onClick={() => this.nextStep(1)} alt=""></img>
            <img className="back-hover" src={require('../../images/tests/next-hover.png')} onClick={() => this.nextStep(1)} alt=""></img>
          </div>
        </div>
        :
        <div>
          <div className="finish-title">恭喜完成水平测试</div>
          <div className="finish-level">
            <img alt="" onClick={this.saveTest} src={require('../../images/tests/level.png')}></img>
            <span className="finish-level-text">{this.state.lastLevel}</span>
          </div>
          <div className="finish-btn test-back">
            <img className="back-normal" alt="" onClick={this.saveTest} src={require('../../images/tests/finish-normal.png')}></img>
            <img className="back-hover" alt="" onClick={this.saveTest} src={require('../../images/tests/finish-hover.png')}></img>
          </div>
        </div>
        }
      </div>
    );
  }
}
export default TestStart;